<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			div {
				width: 300px;
				height: 200px;
				box-sizing: border-box;
			}

			main {
				border: 2px solid black;
				width: 620px;
				height: 220px;
				margin: 0 auto;
				padding: 20px;
				/* background-color: #CCCCCC; */
				background-color: antiquewhite;

				background-clip: content-box;

			}


			div:nth-of-type(1) {
				border: solid 1px red;
				float: left;
			}

			div:nth-of-type(2) {
				/* background: blue; */

				border: 1px solid black;
				/* float: right; */
				
			        float: left; 
			        margin-left: 20px;
			       
			}
		</style>
	</head>
	<body>

		<!-- 
		 float 浮动 
		 
		 浮动后 会影响 后面的元素 ，前面的元素不会受到影响的。
		 -->

		<main>
			<div></div>
			<div></div>


		</main>




	</body>
</html>
